<template>
  <!-- 安防信息 -->
  <view class="securityMessage">
    <view class="wrapper">
      <view
        class="wrapper_item"
        v-for="item in securityList"
        :key="item.id"
        :data-url="`${item.url}?companyId=${options.companyMessageId}`"
        @click="handleClickRouter"
      >
        <view class="avatar">
          <image class="headImg" :src="baseImgUrl + item.icon"></image>
        </view>
        <view class="anName">
          <view class="title_name">{{ item.name }}</view>
          <view class="an_state">{{ item.caption }}</view>
        </view>
        <view class="perfect" :class="item.state == 0 ? 'peZero' : 'peFirst'">
          {{ item.state == 0 ? "去完善" : "去修改" }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { publicSecurityDetail } from "@/api/home.js";
import {
  handleClickRouter,
  ifUndefined,
  isNull,
  isNull2,
  isNum,
} from "@/utils/util.js";

export default {
  name: "securityMessage",
  data() {
    return {
      baseImgUrl: this.$baseImgUrl,
      baseURL: this.$baseURL,
      options: {},
      securityList: [
        {
          id: 1,
          state: 0, //0：去完善   1：去修改
          name: "消防设施",
          icon: "security_icon1.png",
          caption: "安全通道、消防器材、消防栓......",
          url: "/securityInfor/fireProtection/fireProtection",
        },
        {
          id: 2,
          state: 0,
          name: "物防设施",
          icon: "security_icon2.png",
          caption: "防盗门、防盗窗、防护栏信息",
          url: "/securityInfor/materialDefense/materialDefense",
        },
        {
          id: 3,
          state: 0,
          name: "安全制度",
          icon: "security_icon3.png",
          caption: "在此上传企业安全制度",
          url: "/securityInfor/SafetyRegime/SafetyRegime",
        },
        {
          id: 4,
          state: 0,
          name: "技防设施",
          icon: "security_icon4.png",
          caption: "监控、自动报警设备信息",
          url: "/securityInfor/technicalPrevention/technicalPrevention",
        },
        {
          id: 5,
          state: 0,
          name: "人防情况",
          icon: "security_icon5.png",
          caption: "保安人数、联防队员人数",
          url: "/securityInfor/airDefenseSituation/airDefenseSituation",
        },
      ],
    };
  },
  onLoad(options) {
    this.options = options;
  },
  onShow() {
    uni.removeStorageSync("dutyList");
    this.getList();
  },
  methods: {
    handleClickRouter,
    getList() {
      publicSecurityDetail({ companyId: this.options.companyMessageId }).then(
        (res) => {
          if (res.code == 200) {
            if (Object.keys(res.result).length == 0) return false;

            let {
              secureChannelInfo,
              floodlightInfo,
              fireHydrantInfo,
              emergencyPlanInfo,
              fireToolInfo,
              securityDoorInfo,
              securityWindowInfo,
              protectiveFenceInfo,
              safeInfo,
              securitySystemInfo,
              monitorInfo,
              reportInfo,
              airDefenseInfo,
            } = res.result;
            this.dutyPersonName = airDefenseInfo.dutyPersonName;

            // 人防情况中要用到
            var dutyList = {
              dutyPersonName: airDefenseInfo.dutyPersonName,
              securityStaffCount: airDefenseInfo.securityStaffCount,
              jointDefenceCount: airDefenseInfo.jointDefenceCount,
            };
            uni.setStorageSync("dutyList", dutyList);

            // 消防设施状态
            if (
              isNull2(secureChannelInfo.onSecureChannel) &&
              isNull2(floodlightInfo.onFloodlight) &&
              isNull2(fireHydrantInfo.onFireHydrant) &&
              isNull2(emergencyPlanInfo.onEmergencyPlan) &&
              isNull2(fireToolInfo.onFireTool)
            ) {
              this.securityList[0].state = 0;
            } else {
              this.securityList[0].state = 1;
            }

            if (
              isNum(securityDoorInfo.onSecurityDoor) ||
              isNum(securityWindowInfo.onSecurityWindow) ||
              isNum(protectiveFenceInfo.onProtectiveFence) ||
              isNum(safeInfo.onSafe)
            ) {
              this.securityList[1].state = 1;
            } else {
              this.securityList[1].state = 0;
            }

            // 安全制度状态
            if (securitySystemInfo.onSecuritySystem != null) {
              this.securityList[2].state = 1;
            } else {
              this.securityList[2].state = 0;
            }

            // 技防设施状态
            if (monitorInfo.onMonitor != null || reportInfo.onReport != null) {
              this.securityList[3].state = 1;
            } else {
              this.securityList[3].state = 0;
            }

            // 人防情况状态
            if (airDefenseInfo.onSecurityStaff != null) {
              this.securityList[4].state = 1;
            } else {
              this.securityList[4].state = 0;
            }
          }
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.securityMessage {
  flex: 1;
  background: #f9f9f9;

  .wrapper {
    margin: 20rpx;
  }

  .wrapper_item {
    display: flex;
    justify-content: flex-start;
    // align-items: center;

    margin-bottom: 20rpx;
    padding: 30rpx;
    border-radius: 16rpx;
    background: #fff;

    .avatar {
      margin-right: 1.5vh;
      border-radius: 130rpx;
      overflow: hidden;
      width: 116rpx;
      height: 116rpx;
      .headImg {
        overflow: hidden;
        width: 116rpx;
        height: 116rpx;
      }
    }

    .anName {
      flex: 1;
      margin-top: 10rpx;
      .title_name {
        margin-bottom: 10rpx;

        font-size: 36rpx;
        font-weight: bold;
        color: #000000;
      }

      .an_state {
        font-size: 24rpx;
        font-weight: 400;
        color: #bbbbbb;
      }
    }

    .perfect {
      margin-top: 22rpx;
      padding: 0 13rpx;
      font-size: 24rpx;
      font-weight: 500;
      min-width: 96rpx;
      height: 35rpx;
      line-height: 35rpx;
      color: #fff;
      background: #2488f5;
      border-radius: 18rpx;
    }

    .peZero {
      color: #fff;
      background: #2488f5;
    }

    .peFirst {
      color: #c1bdbd;
      background: #e8e8e8;
    }
  }
}
</style>
